<template>
  <div class="multi-account-template">
    <!-- 左侧账号列表 -->
    <div class="left">
      <div
        class="account-item"
        @click="active = index"
        :class="{ active: active === index }"
        v-for="(account, index) in accounts"
        :key="account._id"
      >
        <div class="name">
          {{ account.Name }}
        </div>
        <div class="id">id：{{ account._id }}</div>
      </div>
    </div>
    <!-- 右侧数据选项 -->
    <div class="right">
      <slot :active="active"></slot>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, inject, watch } from "vue";
const accounts: any = inject("accounts");

const active = ref(0);

// 通知父组件选择的账号下标改变
const emit = defineEmits(["update:active"]);
watch(active, (newVal) => {
  emit("update:active", newVal);
});
</script>

<style scoped lang="less">
.multi-account-template {
  display: flex;
  height: 500px;
  .left {
    width: 250px;
    height: 100%;
    flex-shrink: 0;
    padding: 10px;
    border: 1px solid #cec3c3;
    overflow: auto;
    margin-right: 20px;
    .account-item {
      padding: 10px;
      cursor: pointer;
      .name {
        color: #333;
      }
      .id {
        color: #999;
      }
      &.active {
        .name {
          font-weight: bold;
          color: #32b81f;
        }
      }
    }
  }
}
</style>
